import React from 'react';
import ReactDOM from 'react-dom';
import { withRouter, Link, Switch, Route} from 'react-router-dom'

import u from '../../common.js';
import BasicPage from '../basicStyle.js';
import $ from 'jquery';
import { Table,Pagination,LocaleProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';//国际化

import '../../static/headSearch/searchCont.less';

let searchFlag=true;
//时间格式化
let dateFormate=(timestamp)=>{
  let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
  let Y = date.getFullYear();
  let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
  let D = date.getDate() <10? '0'+date.getDate():date.getDate();

  let h = date.getHours()<10? '0'+date.getHours():date.getHours();
  let m = date.getMinutes()<10? '0'+date.getMinutes():date.getMinutes();;
  let s = date.getSeconds()<10? '0'+date.getSeconds():date.getSeconds();;
  return Y +'-'+ M +'-'+ D +'  '+ h + ':'+ m + ':' + s;
};

export default class Indexmodule extends React.Component{
constructor(props){
  super(props)
  this.state={
    dataArr:[],//表格数据
    total:'',
    size:10,
    current:1,
    flag:false,
    loading:false

  }
}

componentWillMount(){
  this.search()
} 
componentDidMount(){
 
  this.hightLight()
}

itemRender = (current, pagesize) => {
  // console.log(current)
  this.setState((prevState, props) => ({
    current: current,
    size: pagesize
  }),()=>{
this.search()
  })

}
// 表格数据高亮
hightLight(){
  let time =setInterval(()=>{
    if(this.state.flag){
      this.setState({
        flag:false
      })
     let td=document.querySelectorAll('.ant-table-tbody>tr>td:nth-of-type(3)');
     for(let i=0;i<td.length;i++){
       td[i].innerHTML=this.state.dataArr[i].title;
     }
    }
   
    },10)
}
componentDidUpdate(){
  this.hightLight()
}



search=()=>{
  this.setState({ loading: true });
  // 头部搜索功能实现
  // u.shouYe({page:1},data=>{

  // })
u.shouYe({
 
  page:this.state.current,

},data=>{

  searchFlag=false;
  let searchData=data.data[0].value.data;
  // console.log(searchData)
  let arr=[];
  
  for(let i=0;i<searchData.length;i++){

    arr.push({id:(this.state.current ? (this.state.current - 1) : 0) * this.state.size + i + 1,title:searchData[i].title,webSite:searchData[i].webSite,description:searchData[i].content,addTime:dateFormate(searchData[i].addTime),poTime:dateFormate(searchData[i].poTime),url:searchData[i].url})
  }
  this.setState({
    dataArr:arr,
    total:data.data[0].value.total,
    flag:true,
    loading:false

  })
})
}

render(){
  const columns = [
    {
      title:'ID', 
      dataIndex: 'id', 
      key: 'id',
      width:200
    },
    { 
      title: '标题', 
      dataIndex: 'title', 
      key: 'title',
      width:300
    },
    { 
      title: '来源', 
      dataIndex: 'webSite', 
      key: 'webSite',
      width:260
    },
    { 
      title: '发布时间', 
      dataIndex: 'addTime', 
      key: 'addTime',
      width:240
    },
    { 
      title: '监测时间', 
      dataIndex: 'poTime', 
      key: 'poTime',
      width:240
    },
    // { title: '操作', dataIndex: '', key: 'x', render: () => <a href="javascript:;">查看</a> },
  ];
  
  
  return(
    <div className='searchTable'>
      <Table
    columns={columns}
    pagination={false}
    expandedRowRender={record => <p dangerouslySetInnerHTML={{ __html: record.description.replace(/<br \/>/g, '').replace(/<vrv-img\/>/g, '') }} style={{ margin: 0 }}></p>}
    dataSource={this.state.dataArr}
    onRow={(record,rowkey)=>{
      return {
        onClick: () => {
          const w = window.open('about:blank');
        //  console.log(rowkey);
         w.location.href=this.state.dataArr[rowkey].url
          },  
      }
    }}
    loading={this.state.loading}
    locale={{emptyText:'暂无任何数据'}}
  />
  {/* 分页按钮 */}
   <LocaleProvider locale={zhCN}>
 <Pagination 
 showQuickJumper 
 showSizeChanger 
 defaultCurrent={this.state.current} 
 total={this.state.total}
 style={{ marginLeft: "27%",marginTop: "2%"}} 
 defaultPageSize={10} 
 onChange={this.itemRender}
 onShowSizeChange={this.itemRender}
            />
  </LocaleProvider>
    </div>
  )
}

}



